
import { CapabilityButton } from "@/components/capability/capability-button";
import { CapabilityDropdown, ICapabilityDropdownProps } from "@/components/capability/capability-dropdown";
import { filterCapability } from "@/components/capability/funs/filterCapability";
import { Button, Space } from "@/components/base";
import I001 from "./icons/I001.svg?react";
import Icon from '@ant-design/icons';
import styles from './index.module.less';
import React from "react";

export function TableOperate(props: ICapabilityDropdownProps) {

    const subMenu = React.useMemo(() => {
        if (props.capabilities) {
            return filterCapability(props.capabilities, props.data, props.index);
        } else {
            return [];
        }
    }, [props])
    
    return (
        <Space>
            {subMenu?.slice(0, 2).map((e, i) => <CapabilityButton key={i} type='link' style={{ padding: 0 }} data={props.data} index={props.index} capability={e} />)}
            {
                ((subMenu?.length ?? 0) > 2) &&
                <CapabilityDropdown data={props.data} index={props.index} capabilities={subMenu?.slice(2) ?? []} >
                    <Button className={styles.dropdown} type='text' icon={<Icon component={I001} />} />
                </CapabilityDropdown>
            }
        </Space>
    )
}